<template>
  <div class="page-wrap">
    <div class="page-title">HelpTip</div>
    <div class="page-sub-title">简介</div>
    <el-card style="width: 600px">
      该组件可适用于弹框显示文字、内嵌组件、内嵌iframe等，作展示作用，无“提交”“确认”等交互功能。并且可用拖动弹框，改变弹框大小。
    </el-card>
    <div class="page-sub-title">基础用法</div>
    <el-card style="width: 600px">
      <p>1.进行文字展示</p>
      <codeShow :code="code1">
        <el-button @click="openText">内嵌文字</el-button>
        <cdsHelpTip v-if="textVisible" @closeTip="closeText" title="文字标题">
          <template v-slot:tipContent>
            文字展示内容，弹框默认大小及位置
          </template>
        </cdsHelpTip>
      </codeShow>
      <p>2.内嵌组件</p>
      <codeShow :code="code2">
        <el-button @click="openModule">内嵌组件</el-button>
        <cdsHelpTip v-if="moduleVisible" @closeTip="closeModule" title="组件标题">
          <template v-slot:tipContent>
            <test-module></test-module>
          </template>
        </cdsHelpTip>
      </codeShow>
      <p>3.内嵌ifram</p>
      <CodeShow :code="code3">
        <el-button @click="openIframe">内嵌iframe</el-button>
        <cdsHelpTip  v-if="iframeVisible" @closeTip="closeIframe">
          <template v-slot:tipContent>
            <iframe src="https://juejin.cn/" width="100%" height="100%">
            </iframe>
          </template>
        </cdsHelpTip>
      </CodeShow>
    </el-card>
    <div class="page-sub-title">Attributes</div>
    <el-table
      :data="attributesData"
      style="width: 100%">
      <el-table-column
        prop="field"
        label="参数">
      </el-table-column>
      <el-table-column
        prop="desc"
        label="说明">
      </el-table-column>
      <el-table-column
        prop="type"
        label="类型">
      </el-table-column>
      <el-table-column
        prop="available"
        label="可选值">
      </el-table-column>
      <el-table-column
        prop="default"
        label="默认值">
      </el-table-column>
    </el-table>
  </div>
</template>
<script setup>
import { ref } from 'vue'
 // import cdsHelpTip from 'cds-ui-business-components/cdsHelptip/src/helpTip.vue'
import testModule from './testModule.vue'
import CodeShow from '@/components/code.vue'
 import {CdsHelpTip} from 'cds-ui-business-components'





// 代码
const code1 = `<cdsHelpTip v-if="textVisible" @closeTip="closeText" title="文字标题">
  <template v-slot:tipContent>
    文字展示内容，弹框默认大小及位置
  </template>
</cdsHelpTip>`
const code2 = `<cdsHelpTip v-if="moduleVisible" @closeTip="closeModule" title="组件标题">
  <template v-slot:tipContent>
    <test-module></test-module>
  </template>
</cdsHelpTip>

<!-- testModule组件 -->
<template>
  <el-form :model="form" label-width="120px">
    <el-form-item label="Activity name">
      <el-input v-model="form.name" />
    </el-form-item>
    <el-form-item label="Activity zone">
      <el-select v-model="form.region" placeholder="please select your zone">
        <el-option label="Zone one" value="shanghai" />
        <el-option label="Zone two" value="beijing" />
      </el-select>
    </el-form-item>
  </el-form>
</template>
`
const code3 = `<cdsHelpTip  v-if="iframeVisible" @closeTip="closeIframe">
  <template v-slot:tipContent>
    <iframe src="https://juejin.cn/" width="100%" height="100%">
    </iframe>
  </template>
</cdsHelpTip>`

// 文本
const textVisible = ref(false)
const openText = function() {
  textVisible.value = true
}
const closeText = (val) => {
  textVisible.value = val
}
// 组件
const moduleVisible = ref(false)
const openModule = function() {
  moduleVisible.value = true
}
const closeModule = (val) => {
  moduleVisible.value = val
}

// iframe
const iframeVisible = ref(false)
const openIframe = function() {
  iframeVisible.value = true
}
const closeIframe = (val) => {
  iframeVisible.value = val
}

// 属性
const attributesData = [
  {field: 'title', desc: '弹框标题', type: 'String', available: 'any', default: '标题'},
  {field: 'initRight', desc: '初始位置距离浏览器右侧像素', type: 'Number', available: '大于0数字', default: '50'},
  {field: 'initTop', desc: '初始位置距离浏览器上方像素', type: 'Number', available: '大于0数字', default: '50'},
  {field: 'initWidth', desc: '弹框初始宽度', type: 'Number', available: '大于0数字', default: '240'},
  {field: 'initHeight', desc: '弹框初始高度', type: 'Number', available: '大于0数字', default: '320'},
]

</script>
<style scoped lang="scss">
.page-wrap {
  text-align: left;
  font-size: 14px;
  .page-title {
    font-size: 36px;
    text-align: left;
    line-height: 100px;
    font-weight: bold;
  }
  
  .page-sub-title {
    font-size: 20px;
    font-weight: bold;
    margin: 24px 0;
  }
}
</style>